<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <div class="col-lg-3">
                                <el-select v-model="searchForm.type" placeholder="请选择">
                                    <el-option
                                        v-for="item in [{ value: '', label: '全部' }, { value: 0, label: '已完成' }, { value: 1, label: '运行中' }]"
                                        :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <div id="instChart" style="width:100%;height:300px;text-align: center;margin: auto;"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: { type: "" },
            dataList: [],
            lcChart: null,

        }
    },
    watch: {
        "searchForm.type": {//监听字段变化
            handler: function (newVal, old) {
                this.initData();
            }
        }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "流程任务耗时统计" }]);
        setTimeout(() => {
            this.initChart();
            this.initData();
        }, 500);
    },
    methods: {
        initChart() {
            this.lcChart = this.$echarts.init(document.getElementById('instChart'));
            this.lcChart.setOption({
                title: {
                    text: '流程任务平均运行时间统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} {b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series: [
                    {
                        name: '平均任务时间',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            // {"name":"订单审批流程","value":"11"},
                            // {"name":"会签流程","value":"3"},
                            // {"name":"网关流程","value":"4"},
                            // {"name":"请假流程","value":"8"},
                            // {"name":"测试流程","value":"50"}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },
        initData() {
            if (null != this.lcChart) {
                apiUtil.post(process.env.VUE_APP_OMP_API + "/lcReport/taskTime", this.searchForm).then(({ data }) => {
                    let option = this.lcChart.getOption();
                    option.series[0].data = data.data;
                    this.lcChart.setOption(option);
                });
            }
        },
    }
};
</script>